<template>
	<!-- #ifndef APP-NVUE -->
	<view class="yb-page yb-flex" :animation="animationData" :id="customIdSync" :class="customClassSync" :style="rootStyle" :render-whole="true">
	<!-- #endif -->
	<!-- #ifdef APP-NVUE -->
	<view class="yb-page yb-flex yb-flex-1" :id="customIdSync" :class="customClassSync" :style="customStyleSync" ref="ybPage">
	<!-- #endif -->
		<slot></slot>
	</view>
</template>

<script>
	import ComponentMixin from '../../js_sdk/componentMixin.js'
	export default {
		mixins: [ComponentMixin],
		props: {
			duration: {
				type: Number,
				default: 500
			},
			//允许页面滚动,仅vue页面有效
			allowScroll: {
				type: Boolean,
				default: false
			}
		},
		data () {
			return {
				top: 0,
				animationData: []
			}
		},
		computed: {
			rootStyle () {
				return this.filterStyle(
					this.allowScroll ? {
						'min-height': `calc(100vh - ${this.top}px)`,
						'overflow': 'visible'
					} : {
						height: `calc(100vh - ${this.top}px)`
					}
				) + this.customStyleSync
			}
		},
		mounted() {
			setTimeout(() => {
				// #ifndef APP-NVUE
				const animation = uni.createAnimation({
					duration: this.duration,
					timingFunction: "ease",
					delay: 0
				})
				animation.opacity(1).step()
				this.animationData = animation.export()
				// #endif
				// #ifdef APP-NVUE
				uni.requireNativePlugin('animation').transition(this.$refs.ybPage, {
				    styles: {
						opacity: 1
				    },
				    duration: this.duration, //ms
				    timingFunction: 'ease',
				    needLayout:false,
				    delay: 0 //ms
				});
				// #endif
			}, 50)
			// #ifndef APP-NVUE
			uni.getSystemInfo({
				success: (res) => {
					this.top = res.windowTop
				}
			})
			// #endif
		}
	}
</script>

<style scoped>
	.yb-page {
		/* #ifndef APP-NVUE */
		width: 100%;
		/* #endif */
		opacity: 0;
	}
</style>